$(function() {
	// 1.1 获取裁剪区域的 DOM 元素 
	// var $image = $('#image')
	// // 1.2 配置选项 
	// const options = {
	// 	// 纵横比 
	// 	aspectRatio: 1,
	// 	// 指定预览区域 
	// 	preview: '.img-preview',
	// 	// zoomable: true,
	// 	zoomOnWheel: false
	// }
	// // 1.3 创建裁剪区域 
	// $image.cropper(options)
	$('#image').attr('src', JSON.parse(localStorage.getItem('userInfo')).user_pic).cropper({
		aspectRatio: 1,
		preview: '.img-preview'
	})




	/* 实现图片上传 */
	$('.layui-btn.upload').on('click', function() {
		$('#uploadFile').val('') //  初始化表单资源
		$('#uploadFile').click() //  type=file被点击了
	})

	/* 监听被选择了 */
	$('#uploadFile').on('change', function() {
		//alert(123)
		//  获取选中图片的资源  是一个数组类型
		var files = $('#uploadFile')[0].files
		if (files.length <= 0) {
			return alert('请重新选择图片')
		}

		//  获取图片src

		//blob  使用URL对象将文件资源转换成路径【临时路径是一个blob格式】
		var url = URL.createObjectURL(files[0])
		console.log(url, 888);

		/* 将原先的数据销毁掉  然后添加src属性  在重新初始化 */

		$('#image').cropper('destroy').attr('src', url).cropper({
			aspectRatio: 1,
			preview: '.img-preview'
		});

		/* 总结三个步骤   选择了图片后需要将图片显示到页面上
		+  获取图片选择的资源 
		+  将资源文件转换成路径
		+  将途经赋值给img的src属性即可
		
		 */

	})

	$('.layui-btn-danger').on('click', function() {
		//   base64格式  ：字符串 避免图片发送请求  +  体积是原图片大30% 小图片就使用
		var dataURL = $('#image').cropper('getCroppedCanvas', {
			// 创建一个 Canvas 画布 
			width: 100,
			height: 100
		}).toDataURL('image/png')
		//  将图片转换成base64格式

		//console.log(dataURL, 999);
		$.ajax({
			url: '/my/update/avatar',
			type: 'post',
			data: {
				avatar: dataURL
			},
			success: function(res) {
				console.log(res, 66666);
				//window.parent.location.reload()
				window.parent.getUserInfo()
			},
		})
	})





})
